<template>
	<el-dialog
        v-model="visible"
        :title="!dataForm.id ? '新增' : '修改'"
        :close-on-click-modal="false"
        draggable>
		<el-form
            ref="dataFormRef"
            :model="dataForm"
            :rules="dataRules"
            label-width="120px"
            @keyup.enter="onSubmit()">
			<el-form-item
                prop="name"
                label="名称">
				<el-input
                    v-model="dataForm.name"
                    placeholder="名称">
                </el-input>
			</el-form-item>
			<el-form-item
                prop="remark"
                label="备注">
				<el-input
                    v-model="dataForm.remark"
                    placeholder="备注">
                </el-input>
			</el-form-item>
			<el-form-item label="菜单权限">
				<el-tree
                    ref="menuListTree"
                    :data="menuList"
                    :props="{ label: 'name', children: 'children' }"
                    node-key="id"
                    accordion
                    show-checkbox>
                </el-tree>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="onSubmit()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'
import { roleStore } from '@/store/role'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refresh'])

const useRoleStore = roleStore()
const dataForm = reactive({
	id: '',
	name: '',
	remark: '',
	menuIdList: [],  // 后端给的名称
    // orgIdList: [],   // 有用到吗？
})

const dataRules = {
	name: [
		{ required: true, message: '名称不能为空', trigger: 'blur' }
	]
}

const visible = ref(false) // 对话框可见性
const dataFormRef = ref(null) // 表单引用
const menuList = ref([])
const menuListTree = ref()

const init = async(id) => {
	visible.value = true // 显示弹窗    

	if (dataFormRef.value) {
		dataFormRef.value.resetFields()
	} 

    // 获取菜单树数据
    try {
        const res = await useRoleStore.getRoleUserTree()
        menuList.value = res || []
    } catch (error) {
        ElMessage.error('获取菜单数据失败')
    }

    if (menuListTree.value) { // 清空已选中的节点
        menuListTree.value.setCheckedKeys([]) 
    }

	if (id) { // 修改模式
		const role = await useRoleStore.getRoleOne(id)
        if (role) { // 如果找到角色信息
			Object.assign(dataForm, role) // 将角色信息赋值给表单数据
            nextTick(() => { // 异步更新表单数据
                if (dataForm.menuIdList) {
                    menuListTree.value.setCheckedKeys(dataForm.menuIdList)
                } else {
                    menuListTree.value.setCheckedKeys([])
                }
            }) 
		} else { // 如果没有找到角色信息
			ElMessage.error('角色不存在') // 提示错误信息
			visible.value = false // 关闭弹窗
		}
	} else { // 新增模式
		dataForm.id = '' // 角色ID为空
		dataForm.name = '' // 角色名称为空
		dataForm.remark = '' // 角色备注为空
		dataForm.menuIdList = [] // 菜单ID列表为空
	}
}
// 提交表单
const onSubmit = async() => {
    if (!dataFormRef.value) return // 表单ref不存在，直接返回

	await dataFormRef.value.validate(async(valid) => {
		if (valid) {
			try {
                // TODO 莫名其妙啊，提交的数据说格式不正确
				const submitData = { ...dataForm } // 复制表单数据
                submitData.menuIdList = menuListTree.value.getCheckedKeys() // 菜单ID列表
                console.log('提交的数据:', submitData)
                await useRoleStore.saveRole(submitData)
				ElMessage.success('操作成功')
				visible.value = false // 关闭对话框
                emit('refresh') // 刷新列表
			} catch (error) {
				ElMessage.error(error.message || '操作失败')
			}
		} else {
			ElMessage.error('请输入正确的信息')
		}
	})
}

defineExpose({ init })

</script>